<template>
  <div style="margin-top: 10px">
    <h3 class="index-title-h3" style="text-align: center">心理性格色彩测试</h3>
    <el-row>
      <el-carousel :interval="5000" arrow="always" type="card">
        <el-carousel-item >
          <img src="@/assets/carousel/1.png" class="carousel-img">
        </el-carousel-item>
        <el-carousel-item >
          <img src="@/assets/carousel/2.png" class="carousel-img">
        </el-carousel-item>
        <el-carousel-item >
          <img src="@/assets/carousel/3.png" class="carousel-img">
        </el-carousel-item>
        <el-carousel-item >
          <img src="@/assets/carousel/4.png" class="carousel-img">
        </el-carousel-item>
      </el-carousel>
    </el-row>
    <el-row class="app-item-contain">
      <h3 class="index-title-h3" style="border-left: solid 10px #3651d4;">测试中心</h3>
      <div style="padding-left: 15px">
        <el-collapse  v-loading="taskLoading"  accordion v-if="taskList.length!==0">
          <el-collapse-item :title="taskItem.title +'\u0020\u0020\u0020(\u0020测试时间段：\u0020\u0020' +taskItem.limitStartTime+'\u0020-\u0020'+taskItem.limitEndTime+'\u0020)'" :name="taskItem.id" :key="taskItem.id" v-for="taskItem in taskList">
            <table class="index-task-table">
              <tr v-for="paperItem in taskItem.paperItems" :key="paperItem.examPaperId">
                <td class="index-task-table-paper">
                  {{paperItem.examPaperName}}
                </td>
                <td width="70px">
                  <el-tag :type="statusTagFormatter(taskItem.status)" v-if="taskItem.status !== null" size="mini">
                    {{ statusTextFormatter(taskItem.status) }}
                  </el-tag>
                </td>
                <td width="80px">
                  <router-link target="_blank" :to="{path:'/do',query:{taskId:taskItem.id, examPaperId:paperItem.examPaperId}}"  v-if="taskItem.status === 1">
                    <el-button  type="text" size="small" >开始测试</el-button>
                  </router-link>
                  <!-- <router-link target="_blank" :to="{path:'/edit',query:{id:paperItem.examPaperAnswerId}}" v-else-if="paperItem.status === 2">
                    <el-button  type="text" size="small">批改试卷</el-button>
                  </router-link> -->
                  <router-link target="_blank" :to="{path:'/read',query:{id:taskItem.id}}" v-else-if="taskItem.status === 3">
                    <el-button  type="text" size="small">查看测验</el-button>
                  </router-link>
                </td>
              </tr>
            </table>
          </el-collapse-item>
        </el-collapse>
      </div>
    </el-row>
   <el-row class="app-item-contain">
      <div style="padding-left: 15px">
        <el-col :span="4" v-for="(item, index) in fixedPaper" :key="index" :offset="index > 0 ? 1 : 0">
          <el-card :body-style="{ padding: '0px' }" v-loading="loading">
            <img src="@/assets/exam-paper/show1.png" class="image">
            <div style="padding: 14px;">
              <span>{{item.name}}</span>
              <div class="bottom clearfix">
                <router-link target="_blank" :to="{path:'/do',query:{id:item.id}}">
                  <el-button type="text" class="button">开始做题</el-button>
                </router-link>
              </div>
            </div>
          </el-card>
        </el-col>
      </div>
    </el-row>
    <el-row class="app-item-contain">
      <div style="padding-left: 15px">
        <el-col :span="4" v-for="(item, index) in timeLimitPaper" :key="index" :offset="index > 0 ? 1 : 0">
          <el-card :body-style="{ padding: '0px' }" v-loading="loading">
            <img src="@/assets/exam-paper/show2.png" class="image">
            <div style="padding: 14px;">
              <span>{{item.name}}</span>
              <p class="index-limit-paper-time">
                <span>{{item.startTime}}</span>
                <br/>
                <span>{{item.endTime}}</span>
              </p>
              <div class="bottom clearfix">
                <router-link target="_blank" :to="{path:'/do',query:{id:item.id}}">
                  <el-button type="text" class="button">开始做题</el-button>
                </router-link>
              </div>
            </div>
          </el-card>
        </el-col>
      </div>
    </el-row>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import indexApi from '@/api/dashboard'
import store from '@/store'
// import { ElMessage, ElMessageBox } from 'element-plus'
// import loginApi from '@/api/login'

export default {
  data () {
    return {
      fixedPaper: [],
      timeLimitPaper: [],
      pushPaper: [],
      loading: false,
      taskLoading: false,
      taskList: []
    }
  },
  // 在 created 方法中，修改任务加载的逻辑

  // 修改dashboard/index.vue中的created方法
  created () {
    let _this = this
    this.loading = true
    indexApi.index().then(re => {
      // _this.fixedPaper = re.response.fixedPaper
      // _this.timeLimitPaper = re.response.timeLimitPaper
      _this.pushPaper = re.response.pushPaper
      _this.loading = false
    }).catch(error => {
      console.error('加载试卷列表失败:', error)
      _this.loading = false
    })
    // 检查用户登录状态，如果已经登录才加载任务列表
    if (store.getters.isLogin) {
      this.taskLoading = true
      indexApi.task().then(re => {
        _this.taskList = re.response || []
        _this.taskLoading = false

        // 只有在任务列表加载完成后才检查是否需要显示提示
        // 使用会话存储而不是本地存储，这样当用户关闭页面后提示会重置
        if (_this.taskList.length <= 0 && sessionStorage.getItem('isAlertShown') !== 'true') {
          // 此处不应该显示"请先登录"，因为用户已经登录了
          // 只需要显示他们不在当前的测试批次中
          alert('你不在当前的测试批次中')
          sessionStorage.setItem('isAlertShown', 'true')
        }
      }).catch(error => {
        console.error('加载任务列表失败:', error)
        _this.taskLoading = false
      })
    }
  },
  methods: {
    // goToTaskExam (taskId, paperId) {
    //   indexApi.checkIsCanTask(taskId).then(data =>{
    //     if (data.response.code === 1) {
    //       this.$router.push({path:'/do'})
    //     }
    //   })
    // },
    statusTagFormatter (status) {
      return this.enumFormat(this.statusTag, status)
    },
    statusTextFormatter (status) {
      return this.enumFormat(this.statusEnum, status)
    }
  },
  computed: {
    ...mapGetters('enumItem', [
      'enumFormat'
    ]),
    ...mapState('enumItem', {
      statusEnum: state => state.exam.examPaperAnswer.statusEnum,
      statusTag: state => state.exam.examPaperAnswer.statusTag
    })
  }
}
</script>

<style lang="scss" scoped>
  .index-title-h3 {
    font-size: 22px;
    font-weight: 400;
    color: #1f2f3d;
    border-left: solid 10px #2ce8b4;
    padding-left: 10px;
  }

  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 50%;
    height: 80%;
    display: block;
    margin: 20px auto 10px auto;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }
</style>
